<template>
	<div class="Multiple-nav" :class="(locale == 'en') && 'en'">
		<div class="nav-row">
			<div class="row-label">{{ t('nav.Industry') }}:</div>
			<el-cascader
				class="cascader"
				filterable
				v-model="form.industry"
				:options="options.industry"
				@change="handleCascader"
				:props="{ checkStrictly: true }"
			/>
		</div>
		<div class="nav-row">
			<div class="row-label">{{ t('nav.Country') }}:</div>
			<rowSelect
				class="rowSelect"
				:isShowOpen="true"
				:data="countryData"
				:index="indexArr.countryIndex"
				@change="handleRowSelect('countryIndex', $event)"
			></rowSelect>
		</div>
		<div class="nav-row" v-if="isShowProvince">
			<div class="row-label">{{ t('nav.province') }}:</div>
			<rowSelect
				class="rowSelect"
				:data="provinceData"
				:index="indexArr.provinceIndex"
				@change="handleRowSelect('provinceIndex', $event)"
			></rowSelect>
		</div>
		<div class="nav-row" v-if="isShowCity">
			<div class="row-label">{{ t('nav.city') }}:</div>
			<rowSelect class="rowSelect" :data="cityData" :index="indexArr.cityIndex" @change="handleRowSelect('cityIndex', $event)"></rowSelect>
		</div>
		<div class="nav-row">
			<div class="row-label">{{ t('nav.Organization_Type') }}:</div>
			<rowSelect class="rowSelect" :data="agencyTypeData" :index="indexArr.typeIndex" @change="handleRowSelect('typeIndex', $event)"></rowSelect>
		</div>
		<div class="nav-row">
			<div class="row-label">{{ t('nav.Awards') }}:</div>
			<rowSelect
				class="rowSelect"
				:data="winningTypeData"
				:index="indexArr.winningIndex"
				@change="handleRowSelect('winningIndex', $event)"
			></rowSelect>
		</div>
		<div class="nav-row">
			<div class="row-label">{{ t('nav.Patent_Type') }}:</div>
			<rowSelect class="rowSelect" :data="patentTypeData" :index="indexArr.patentIndex" @change="handleRowSelect('patentIndex', $event)"></rowSelect>
		</div>
	</div>
</template>

<script setup lang="ts" name="queryNav">
import { useDict } from '/@/hooks/dict';
import { getTalentAreaTree } from '/@/api/admin/sysArea';
import { getTalentCountry, industryList } from '/@/api/cx/list';
const emit = defineEmits(['change']);
import { useI18n } from 'vue-i18n';
const { t,locale } = useI18n();
// 引入组件
const rowSelect = defineAsyncComponent(() => import('./rowSelect.vue'));

// 定义字典
const { applicant_type, award_flag, pat_type } = useDict('applicant_type', 'award_flag', 'pat_type');

// 定义变量内容

// 是否显示省份
const isShowProvince = computed(()=>{
	let value = countryData.value[indexArr.countryIndex].value
	if(value == '-101000'){
		return true
	}else{
		return false
	}
})

// 是否显示城市
const isShowCity = computed(()=>{
	if(indexArr.provinceIndex>0){
		return true
	}else{
		return false
	}
})

// 下拉变量
const options = reactive<any>({
	industry: [],
});

const form = reactive({
	// 产业数据
	industry: ['1'],
});

// 国家数据
const _countryData = ref([]);

const countryData = computed(() => {
	return [
		{
			label: t('nav.All_Options'),
			value: '',
		},
		..._countryData.value,
	];
});

//省数据
const _provinceData = ref([]);

const provinceData_C:any = ref([]) 

const provinceData = computed(()=>{
	return [
		{
			label: t('nav.All_Options'),
			value: '',
		},
		...provinceData_C.value
	]
})

// 市级数据

const cityData_C:any = ref([
]); 
const cityData = computed(()=>{
	return [
		{
			label: t('nav.All_Options'),
			value: '',
		},
		...cityData_C.value
	]
})

//机构类型
const agencyTypeData = computed<any>(() => {
	return [
		{
			label: t('nav.All_Options'),
			value: '',
		},
		...applicant_type.value,
	];
}); 
//获奖类型
const winningTypeData = computed<any>(() => {
	return [
		{
			label: t('nav.All_Options'),
			value: '',
		},
		...unref(award_flag),
	];
}); 
//专利类型
const patentTypeData = computed<any>(() => {
	return [
		{
			label: t('nav.All_Options'),
			value: '',
		},
		...unref(pat_type),
	];
}); 

// 筛选条件索引
const indexArr = reactive<any>({
	countryIndex: 0,
	provinceIndex: 0,
	cityIndex: 0,
	typeIndex: 0,
	winningIndex: 0,
	patentIndex: 0,
});

// 处理索引
function handleRowSelect(property: any, index: any) {
	indexArr[property] = index;
	if (property == 'provinceIndex') {
		let result: any = provinceData.value[indexArr.provinceIndex];
		if (result.value) {
			getfetchTree(result.value).then((res:any) => {
				cityData_C.value = [
					...res,
				];
				indexArr.cityIndex = 0;
			});
		} else {
			cityData_C.value = [];
			indexArr.cityIndex = 0;
		}
	} else if (property == 'countryIndex') {
		let result: any = countryData.value[indexArr.countryIndex];
		if (result.label == '中国') {
			provinceData_C.value = [
				..._provinceData.value
			];
			indexArr.provinceIndex = 0;

			cityData_C.value = [];
			indexArr.cityIndex = 0;
		} else {
			provinceData_C.value = [];
			indexArr.provinceIndex = 0;
			cityData_C.value = [];
			indexArr.cityIndex = 0;
		}
	}

	handleEmit();
}

// 选择产业后
function handleCascader() {
	handleEmit();
}

// 处理eEmit
function handleEmit() {
	let province = indexArr.provinceIndex == 0 ? '' : provinceData.value[indexArr.provinceIndex].value;
	let city = indexArr.cityIndex == 0 ? '' : cityData.value[indexArr.cityIndex].value;
	emit('change', {
		country: countryData.value[indexArr.countryIndex].value, //国家
		province: province, //省份
		city: city, // 城市
		agencyType: agencyTypeData.value[indexArr.typeIndex].value, // 机构类型
		awardFlag: winningTypeData.value[indexArr.winningIndex].value, // 奖项
		patType: patentTypeData.value[indexArr.patentIndex].value, // 专利类型
		industry: form.industry[form.industry.length - 1], //产业
	});
}

// 请求国家数据
async function FnGetTalentCountry() {
	const { data } = await getTalentCountry();
	//const { data } = await getTalentAreaTree({ pid: 100000 });
	_countryData.value = data.map((n) => {
		n.label = n.name;
		n.value = n.adcode;
		return n;
	});
}

// 请求省地区数据
async function getprovince() {
	const { data } = await getTalentAreaTree({ pid: 100000 });
	_provinceData.value = data.map((n) => {
		n.label = n.name;
		n.value = n.id;
		return n;
	});
}

// 请求地区数据
function getfetchTree(pid:any) {
	return new Promise<void>(async (resolve, reject) => {
		const { data } = await getTalentAreaTree({ pid: pid || 100000 });
		if (Array.isArray(data)) {
			let list:any = data.map((n) => {
				n.label = n.name;
				n.value = n.id;
				return n;
			});
			resolve(list);
		}else{
			resolve([]);
		}
	});
}

// 获取产业下拉
function getIndustryList() {
	industryList().then((res) => {
		if (res.code == 0) {
			options.industry = res.data;
		}
	});
}

onMounted(() => {
	getIndustryList();
	FnGetTalentCountry();
	getprovince();
});
</script>

<style lang="scss" scoped>
.Multiple-nav {
	.nav-row {
		display: flex;
		align-items: center;
		padding: 10px 0;
		& + .nav-row {
			border-top: 1px solid #eee;
		}
		.row-label {
			font-size: 16px;
			margin-right: 20px;
			width: 80px;
			text-align: right;
		}
		.rowSelect {
			flex: 1;
		}
	}
	&.en{
		.row-label{
			width: 150px;
		}
	}
}
:deep(.cascader) {
	width: 500px;
	font-size: 16px;
}

:deep(.cascader .el-input .el-input__inner) {
	font-size: 16px;

}
</style>
